<template>
  <div class="page-container">
    <div class="page-content">
      <div class="panel-container">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form ref="form" size="mini" :model="form" :rules="rules" label-width="80px">
              <el-form-item prop="phone" label="手机号">
                <el-input v-model="form.phone" placeholder="请输入手机号" @change="handleSearch">
                  <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
                </el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-row :gutter="10" v-if="detail1 && detail1.p0">
          <el-col :span="24">
            <div class="tag-list tag-list1" v-if="detail1.p0.vip_label">
              <el-tag v-for="(value, key) in detail1.p0.vip_label" :key="key" type="info" effect="plain">{{ key }}:{{ value }}</el-tag>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="tag-list tag-list2" v-if="detail1.p0.mark">
              <el-tag v-for="tag in detail1.p0.mark" :key="tag.code" type="info" effect="plain">{{ tag.name }}:{{ tag.score }}</el-tag>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="tag-list tag-list3" v-if="detail1.p0.city">
              <el-tag v-for="tag in detail1.p0.city" :key="tag.code" type="info" effect="plain">{{ tag.name }}:{{ tag.socre }}</el-tag>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="info-container">
          <el-col :span="8" v-if="detail1 && detail1.p1">
            <div class="info-panel">
              <div class="title">基本信息</div>
              <div class="info-content">
                <div class="panel-item">
                  <div class="label" :title="detail1.p1.Name">姓名: {{ detail1.p1.Name }}</div>
                </div>
                <div class="panel-item">
                  <div class="label" :title="detail1.p1.Sex">性别: {{ detail1.p1.Sex }}</div>
                </div>
                <div class="panel-item">
                  <div class="label" :title="detail1.p1.age">年龄: {{ detail1.p1.age }}</div>
                </div>
                <div class="panel-item">
                  <div class="label" :title="detail1.p1.Birthday">出生年月: {{ detail1.p1.Birthday }}</div>
                </div>
                <div class="panel-item">
                  <div class="label" :title="detail1.p1.homeprov">家乡: {{ detail1.p1.homeprov }}</div>
                </div>
                <div class="panel-item">
                  <div class="label" :title="detail1.p1.xg">客户性格: {{ detail1.p1.xg }}</div>
                </div>
                <div class="panel-item">
                  <div class="label" :title="detail1.p1.hf">婚姻: {{ detail1.p1.hf }}</div>
                </div>
                <div class="panel-item"></div>
                <div class="panel-item">
                  <div class="label" :title="detail1.p1.Source">客户来源: {{ detail1.p1.Source }}</div>
                </div>
                <div class="panel-item">
                  <div class="label" :title="detail1.p1.reg_time">注册时间: {{ detail1.p1.reg_time }}</div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="11" v-if="detail1 && detail1.p2">
            <div class="info-panel">
              <div class="title">公司信息</div>
              <div class="info-content">
                <div class="panel-item">
                  <div class="label" :title="detail1.p2.ComName">公司名称: {{ detail1.p2.ComName }}</div>
                </div>
                <div class="panel-item">
                  <div class="label" :title="detail1.p2.comproperty">性质: {{ detail1.p2.comproperty }}</div>
                </div>
                <div class="panel-item">
                  <div class="label" :title="detail1.p2.ComAddress">公司地址: {{ detail1.p2.ComAddress }}</div>
                </div>
                <div class="panel-item">
                  <div class="label" :title="detail1.p2.gm">公司规模: {{ detail1.p2.gm }}</div>
                </div>
                <div class="panel-item">
                  <div class="label" :title="detail1.p2.szsc">线下交易市场: {{ detail1.p2.szsc }}</div>
                </div>
                <div class="panel-item">
                  <div class="label" :title="detail1.p2.business_requirement">业务需求: {{ detail1.p2.business_requirement }}</div>
                </div>
                <div class="panel-item">
                  <div class="label" :title="detail1.p2.ComProject">主营: {{ detail1.p2.ComProject }}</div>
                </div>
                <div class="panel-item">
                  <div class="label" :title="detail1.p2.business_area">生意地区: {{ detail1.p2.business_area }}</div>
                </div>
                <div class="panel-item">
                  <div class="label" :title="detail1.p2.qtzgz">认证: {{ detail1.p2.qtzgz }}</div>
                </div>
                <div class="panel-item">
                  <div class="label" :title="detail1.p2.jtcp">合作过的其他平台: {{ detail1.p2.jtcp }}</div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="5" v-if="detail1 && detail1.p3">
            <div class="info-panel">
              <div class="title">联系人</div>
              <div class="info-content">
                <div class="panel-item w100">
                  <div class="label" :title="detail1.p3.names">姓名: {{ detail1.p3.names }}</div>
                </div>
                <div class="panel-item w100">
                  <div class="label" :title="detail1.p3.phones">手机号: {{ detail1.p3.phones }}</div>
                </div>
                <div class="panel-item w100">
                  <div class="label" :title="detail1.p3.relations">与主号关系: {{ detail1.p3.relations }}</div>
                </div>
                <div class="panel-item w100">
                  <div class="label" :title="detail1.p3.marks">备注: {{ detail1.p3.marks }}</div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="10" v-if="detail2" class="info-container">
          <el-col :span="8">
            <div class="info-panel">
              <div class="title">电话回访情况(近30天)</div>
              <div class="info-content">
                <div class="panel-item">
                  <div class="label">呼叫次数: {{ detail2.call_count }}</div>
                </div>
                <div class="panel-item">
                  <div class="label">接通率: {{ detail2.call_percent }}%</div>
                </div>
                <div class="panel-item">
                  <div class="label">未接通次数: {{ detail2.call_no }}</div>
                </div>
                <div class="panel-item">
                  <div class="label">接通次数: {{ detail2.call_yes }}</div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-panel">
              <div class="title">付费属性</div>
              <WordCloud id="wordcloud1" :data="chartData1"></WordCloud>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-panel">
              <div class="title">成交案例</div>
              <WordCloud id="wordcloud2" :data="chartData2"></WordCloud>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="info-container">
          <el-col :span="8" v-if="detail2">
            <div class="info-panel">
              <div class="title">用户行为(近3天)</div>
              <div class="info-content">
                <div class="panel-item">
                  <div class="label">登录/启动次数: {{ detail2.login_count }}</div>
                </div>
                <div class="panel-item">
                  <div class="label">搜索次数: {{ detail2.search_count }}</div>
                </div>
                <div class="panel-item">
                  <div class="label">浏览量: {{ detail2.view_count }}</div>
                </div>
                <div class="panel-item">
                  <div class="label">查看联系方式: {{ detail2.view_phone_count }}</div>
                </div>
                <div class="panel-item">
                  <div class="label">收藏量: {{ detail2.store_count }}</div>
                </div>
                <div class="panel-item">
                  <div class="label">锁定量: {{ detail2.lock_count }}</div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="8" v-if="detail1 && detail1.p3">
            <div class="info-panel">
              <div class="title">回收偏好</div>
              <WordCloud id="wordcloud3" :data="chartData3"></WordCloud>
            </div>
          </el-col>
          <el-col :span="8" v-if="detail1 && detail1.p3">
            <div class="info-panel">
              <div class="title">回收区域</div>
              <WordCloud id="wordcloud4" :data="chartData4"></WordCloud>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import 'echarts-wordcloud'
import { apiLabelPhoneSearch1, apiLabelPhoneSearch2 } from '@/api/dataStatistics'
import { isMobile } from '@/utils/validate'
import WordCloud from './components/WordCloud.vue'

export default {
  name: 'PersonProfile',
  components: { WordCloud },
  data() {
    var validaMobile = (rule, value, callback) => {
      if (value && !isMobile(value)) {
        callback(new Error('手机号格式错误'))
      } else {
        callback()
      }
    }
    return {
      form: {
        phone: '', // 18931890150, 15531157767
      },
      rules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'change' },
          { validator: validaMobile, trigger: 'blur' },
        ],
      },
      detail1: null,
      detail2: null,
      chartData1: [],
      chartData2: [],
      chartData3: [],
      chartData4: [],
    }
  },
  mounted() {
    window.enterPreventDefault = false
  },
  destroyed() {
    window.enterPreventDefault = true
  },
  methods: {
    setChartData() {
      if (this.detail1.p3.pay_detail.length > 0) {
        let data1 = []
        this.detail1.p3.pay_detail.forEach((item) => {
          for (let key in item) {
            data1.push({
              name: key,
              value: item[key],
            })
          }
        })
        this.chartData1 = data1
      } else {
        this.chartData1 = []
      }
      if (this.detail1.p3.success_detail.length > 0) {
        let data2 = []
        data2 = this.detail1.p3.success_detail.map((item) => {
          return {
            name: item.cut_words,
            value: item.count,
          }
        })
        this.chartData2 = data2
      } else {
        this.chartData2 = []
      }
      if (this.detail1.p0.mark.length > 0) {
        let data3 = []
        data3 = this.detail1.p0.mark.map((item) => {
          return {
            name: item.name,
            value: item.score,
          }
        })
        this.chartData3 = data3
      } else {
        this.chartData3 = []
      }
      if (this.detail1.p0.city.length > 0) {
        let data4 = []
        data4 = this.detail1.p0.city.map((item) => {
          return {
            name: item.name,
            value: item.socre,
          }
        })
        this.chartData4 = data4
      } else {
        this.chartData4 = []
      }
    },
    setOption(chart, data) {
      const option = {
        series: [
          {
            type: 'wordCloud',
            data: data,
            // rotationRange: [0, 0],
            sizeRange: [10, 30],
            textStyle: {
              normal: {
                color: '#333',
              },
            },
            drawOutOfBound: true,
          },
        ],
      }
      chart.setOption(option)
    },
    handleSearch() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          apiLabelPhoneSearch1({ phone: this.form.phone }).then((res) => {
            this.detail1 = res.data
            this.$nextTick(() => {
              this.setChartData()
            })
          })
          apiLabelPhoneSearch2({ phone: this.form.phone }).then((res) => {
            this.detail2 = res.data
          })
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">
.panel-container {
  min-height: calc(100vh - 150px);
}
.info-container {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  margin-top: 10px;
}
.info-panel {
  position: relative;
  height: 100%;
  .title {
    color: #333;
    font-weight: bold;
    margin-bottom: 12px;
  }
}
.panel-item {
  width: 50%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  line-height: 30px;
  color: #606266;
  &.w100 {
    width: 100%;
  }
  .label {
    width: 100%;
    padding: 0 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.info-content {
  display: flex;
  flex-wrap: wrap;
}
.tag-list {
  margin-bottom: 8px;
  padding-left: 16px;
  .el-tag {
    margin-right: 4px;
    margin-bottom: 2px;
  }
}
.tag-list1 .el-tag {
  color: #5db42c;
  border-color: #5db42c;
}
.tag-list2 .el-tag {
  color: #f08200;
  border-color: #f08200;
}
.tag-list3 .el-tag {
  color: #2b71b8;
  border-color: #2b71b8;
}
.info-panel {
  border: 1px solid #eee;
  padding: 16px;
}
.wordcloud-container {
  width: 100%;
  height: 150px;
}
.el-empty {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
</style>
